<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Support\JsExp;
use LowCode\Traits\Props\HasHeight;
use LowCode\Traits\Props\HasWidth;
use LowCode\Traits\Slots\HasSlotPlaceholder;

/**
 * 图片组件 NImage
 * @method static static make(string|JsExp $src = null) Image组件
 */
class Image extends Naive
{
    use HasWidth, HasHeight;

    use HasSlotPlaceholder;

    public function __construct(string|JsExp $src = null)
    {
        parent::__construct();
        $src && $this->src($src);
    }

    /**
     * 图片来源
     * @param string|JsExp $src
     * @return $this
     */
    public function src(string|JsExp $src): static
    {
        return $this->prop('src', $src);
    }

    /**
     * 图片说明
     * @param string|JsExp $alt
     * @return $this
     */
    public function alt(string|JsExp $alt): static
    {
        return $this->prop('alt', $alt);
    }

    /**
     * 组件中 img 元素的属性
     * @param array|JsExp $imgProps
     * @return $this
     */
    public function imgProps(array|JsExp $imgProps = []): static
    {
        return $this->prop('imgProps', $imgProps);
    }

    /**
     * 图片加载失败时显示的地址
     * @param string|JsExp $fallbackSrc
     * @return $this
     */
    public function fallbackSrc(string|JsExp $fallbackSrc): static
    {
        return $this->prop('fallbackSrc', $fallbackSrc);
    }

    /**
     * 是否在进入 intersection-observer-options 配置的视口之后再开始加载
     * @param bool|JsExp $bool,
     * @return $this
     */
    public function lazy(bool|JsExp $bool = true): static
    {
        return $this->prop('lazy', $bool);
    }

    /**
     * 预览图片的图片地址
     * @param string|JsExp $previewSrc
     * @return $this
     */
    public function previewSrc(string|JsExp $previewSrc): static
    {
        return $this->prop('previewSrc', $previewSrc);
    }

    /**
     * 是否禁用单击图像预览
     * @param bool|JsExp $bool
     * @return $this
     */
    public function previewDisabled(bool|JsExp $bool = true): static
    {
        return $this->prop('previewDisabled', $bool);
    }

    /**
     * 预览图片时 img 元素的属性
     * @param array|JsExp $previewedImgProps
     * @return $this
     */
    public function previewedImgProps(array|JsExp $previewedImgProps = []): static
    {
        return $this->prop('previewedImgProps', $previewedImgProps);
    }

    /**
     * 图片放大后是否展示底部工具栏
     * @param bool|JsExp $bool,
     * @return $this
     */
    public function showToolbar(bool|JsExp $bool = true): static
    {
        return $this->prop('showToolbar', $bool);
    }

    /**
     * 是否展示工具栏的提示
     * @param bool|JsExp $bool,
     * @return $this
     */
    public function showToolbarTooltip(bool|JsExp $bool = true): static
    {
        return $this->prop('showToolbarTooltip', $bool);
    }

    /**
     * 图片在容器内的的适应类型
     * @param string|JsExp $objectFit 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
     * @return $this
     */
    public function objectFit(string|JsExp $objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'): static
    {
        return $this->prop('objectFit', $objectFit);
    }

    /**
     * 图片在容器内的的适应类型
     * @param array|JsExp $value { root?: Element | Document | string | null, rootMargin?: string, threshold?: number | number[]; }
     * @return $this
     */
    public function intersectionObserverOptions(array|JsExp $value = []): static
    {
        return $this->prop('intersectionObserverOptions', $value);
    }

    /**
     * 工具栏的渲染函数
     * (props: { nodes: { prev: VNode, next: VNode, rotateCounterclockwise: VNode, rotateClockwise: VNode, resizeToOriginalSize: VNode, zoomOut: VNode, zoomIn: VNode, download: VNode, close: VNode } }) => VNodeChild
     * @param string $value
     * @param string|null $id
     * @return $this
     */
    public function renderToolbar(string $value, string $id = null): static
    {
        return $this->jsFunction('render-toolbar', $value, $id);
    }

    /**
     * 图片加载失败执行的回调
     * @param string $event (e: Event) => void
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onError(string $event = "", string $id = null, array $modifiers = []): static
    {
        return $this->event("error", jsFn($event, $id), $modifiers);
    }

    /**
     * 图片加载完成执行的回调
     * @param string $event (e: Event) => void
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onLoad(string $event = "", string $id = null, array $modifiers = []): static
    {
        return $this->event("load", jsFn($event, $id), $modifiers);
    }
}
